<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
	    <script src="../js/flexible.js"></script>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
	    <link href="../css/mui.min.css" rel="stylesheet"/>
	</head>
	<style>
		body{
			background-color: #fff;
		}
		.mui-switch{
			display: inline-block;
		}
		.mui-bar-nav.mui-bar .mui-icon{
			margin-top:-5px;
		}
		
		.mui-switch .mui-switch-handle{
			width: 0.38rem;
			height: 0.38rem;
		}
	
		.mui-title{
		color: #ff585a;
		}
		.mui-icon-arrowleft:before{
			color: #ff585a;
			font-size: 0.7rem !important;
			margin-top:1px;
		}
		ul{
			padding: 0rem 0.2rem;
			margin-top:44px;
		}	
		ul>li{
			list-style: none;
			color: #999;
			font-size: 0.25rem;
			padding: 0.2rem 0rem;
			padding-right:0.5rem;
			position: relative;
			border-bottom: 1px solid #eee;
		}
		.mui-switch {
			position: absolute;
			right: 0px;
			width: 1.2rem;
			height:0.4rem;
		}
		
	</style>
	<body>
		<header class="mui-bar mui-bar-nav .mui-switch-mini">

			<a class="mui-action-back "><span class="mui-icon mui-icon-arrowleft" ></span></a>
			
			<h1 class="mui-title">功能设置</h1>
			
		</header>
		<ul>
			<li>
				接收新消息通知
				<div class="mui-switch mui-switch-mini">
  						<div class="mui-switch-handle"></div>
				</div>
			</li>
			<li>
				文章推送通知
				<div class="mui-switch mui-switch-mini">
					 <div class="mui-switch-handle"></div>
				</div>

			</li>
			<li>
				视频消息通知
				<div class="mui-switch mui-switch-mini">
				 	<div class="mui-switch-handle"></div>
				</div>
			</li>
		</ul>		
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>